export const metadata = { 
  description: "Learn how to set up Jazz in your React Native Expo application."
};

import { Alert, CodeGroup, FileName } from "@/components/forMdx";

# React Native (Expo) Installation and Setup

Jazz supports Expo through the dedicated `jazz-tools/expo` entry, which is specifically designed for Expo applications. If you're building for React Native without Expo, please refer to the [React Native](/docs/react-native/project-setup) guide instead.

Jazz requires an [Expo development build](https://docs.expo.dev/develop/development-builds/introduction/) using [Expo Prebuild](https://docs.expo.dev/workflow/prebuild/) for native code. It is **not compatible** with Expo Go. Jazz also supports the [New Architecture](https://docs.expo.dev/guides/new-architecture/).

Tested with:

<CodeGroup>
```json
"expo": "~53.0.0",
"react-native": "0.79.2",
"react": "18.3.1"
```
</CodeGroup>

## Installation

### Create a new project

(Skip this step if you already have one)

<CodeGroup>
```bash
npx create-expo-app my-jazz-app
cd my-jazz-app
npx expo prebuild
```
</CodeGroup>

### Install dependencies

<CodeGroup>
```bash
# Expo dependencies
npx expo install expo-linking expo-secure-store expo-sqlite expo-file-system @react-native-community/netinfo expo-image-manipulator

# React Native polyfills
npm install @azure/core-asynciterator-polyfill react-native-url-polyfill readable-stream react-native-get-random-values react-native-fast-encoder

# Jazz dependencies
npm install jazz-tools
```
</CodeGroup>

<Alert variant="info" className="mt-4" title="Note"> 
Requires at least Node.js v20. See our [Troubleshooting Guide](/docs/troubleshooting) for quick fixes.
</Alert>

#### Fix incompatible dependencies

If you encounter incompatible dependencies, you can try to fix them with the following command:

<CodeGroup>
```bash
npx expo install --fix
```
</CodeGroup>

### Add polyfills
Jazz provides a quick way for you to apply the polyfills in your project. Import them in your root `_layout.tsx` component:

<FileName>app/_layout.tsx</FileName>
<CodeGroup>
```tsx project-setup/_layout.tsx
```
</CodeGroup>

## Authentication

Jazz provides authentication to help users access their data across multiple devices. For details on implementing authentication with Expo, check our [Authentication Overview](/docs/key-features/authentication/overview) guide and see the [Expo Clerk Demo](https://github.com/garden-co/jazz/tree/main/examples/clerk-expo) for a complete example.

## Next Steps

Now that you've set up your Expo project for Jazz, you'll need to:

1. [Set up the Jazz Provider](/docs/project-setup/providers) - Configure how your app connects to Jazz
2. [Add authentication](/docs/key-features/authentication/overview) (optional) - Enable users to access data across devices
3. Define your schema - See the [schema docs](/docs/core-concepts/covalues/overview) for more information
4. Run your app:

<CodeGroup>
```sh
npx expo run:ios
# or
npx expo run:android
```
</CodeGroup>

If all goes well, your app should start up without any angry red error screens. Take a quick look at the Metro console too - no Jazz-related errors there means you're all set! If you see your app's UI come up smoothly, you've nailed the installation.

If you run into any issues that aren't covered in the Common Issues section, [drop by our Discord for help](https://discord.gg/utDMjHYg42).

## Common Issues

- **Metro bundler errors**: If you see errors about missing polyfills, ensure you installed them all and are importing them correctly
- **iOS build failures**: Make sure you've run `pod install` after adding the dependencies.
- **Android build failures**: Ensure you've run `npx expo prebuild` to generate native code.
- **Expo Go incompatibility**: Remember that Jazz requires a development build and won't work with Expo Go.

### Install CocoaPods

If you're compiling for iOS, you'll need to install CocoaPods for your project. If you need to install it, we recommend using [`pod-install`](https://www.npmjs.com/package/pod-install):

<CodeGroup>
```bash
npx pod-install
```
</CodeGroup>
